<template>
  <div class="right-bottom" :class="rightBottomClasses">
    <!-- Tabs Section (Left) -->
    <Tabs
      v-bind="tabsProps"
      class="right-bottom__tabs"
      :class="{ 'right-bottom__tabs--hidden': ui.isMobile && ui.activeTab !== 'chats' }"
    />
    
    <!-- Chat Mid Section (Center) -->
    <ChatMid
      v-bind="chatMidProps"
      class="right-bottom__chat"
      :class="{ 'right-bottom__chat--hidden': ui.isMobile && ui.activeTab !== 'chats' }"
    />
    
    <!-- Client Info Section (Right) -->
    <ClientInfo
      v-if="!ui.shouldHideClientInfo"
      v-bind="clientInfoProps"
      class="right-bottom__client-info"
    />
    
    <!-- Mobile Tab Navigation -->
    <div v-if="ui.isMobile" class="mobile-tab-nav">
      <button
        v-for="tab in mobileTabs"
        :key="tab.id"
        @click="ui.setActiveTab(tab.id)"
        :class="[
          'mobile-tab-button',
          { 'mobile-tab-button--active': ui.activeTab === tab.id }
        ]"
      >
        <span class="tab-icon">{{ tab.icon }}</span>
        <span class="tab-label">{{ tab.label }}</span>
        <span
          v-if="tab.badge > 0"
          class="tab-badge"
        >
          {{ tab.badge }}
        </span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useStores } from '@/composables'
import type { RightBottomProps } from '@/types'
import Tabs from './Tabs.vue'
import ChatMid from './ChatMid.vue'
import ClientInfo from './ClientInfo.vue'

// Props
defineProps<RightBottomProps>()

// Stores
const { chatStore: chat, uiStore: ui } = useStores()

// Computed properties
const rightBottomClasses = computed(() => ({
  'right-bottom--mobile': ui.isMobile,
  'right-bottom--tablet': ui.isTablet,
  'right-bottom--desktop': ui.isDesktop,
  'right-bottom--client-info-visible': !ui.shouldHideClientInfo,
  'right-bottom--dark': ui.theme === 'dark'
}))

const mobileTabs = computed(() => [
  {
    id: 'chats',
    label: '聊天',
    icon: '💬',
    badge: chat.unreadChatsCount
  },
  {
    id: 'contacts',
    label: '联系人',
    icon: '👥',
    badge: 0
  },
  {
    id: 'settings',
    label: '设置',
    icon: '⚙️',
    badge: 0
  }
])
</script>

<style scoped>
.right-bottom {
  display: grid;
  grid-template-columns: var(--tabs-width) 1fr var(--client-info-width);
  height: 100%;
  background-color: var(--color-background);
  overflow: hidden;
}

.right-bottom--dark {
  background-color: #1a1a1a;
}

/* Layout variations */
.right-bottom--mobile {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
}

.right-bottom--tablet:not(.right-bottom--client-info-visible) {
  grid-template-columns: var(--tabs-width) 1fr;
}

.right-bottom--desktop:not(.right-bottom--client-info-visible) {
  grid-template-columns: var(--tabs-width) 1fr;
}

/* Sections */
.right-bottom__tabs {
  grid-column: 1;
  border-right: 1px solid var(--color-border);
  background-color: var(--color-background-light);
}

.right-bottom--dark .right-bottom__tabs {
  background-color: #2a2a2a;
  border-right-color: #404040;
}

.right-bottom__chat {
  grid-column: 2;
  background-color: var(--color-surface);
}

.right-bottom--dark .right-bottom__chat {
  background-color: #1e1e1e;
}

.right-bottom__client-info {
  grid-column: 3;
  border-left: 1px solid var(--color-border);
  background-color: var(--color-background-light);
}

.right-bottom--dark .right-bottom__client-info {
  background-color: #2a2a2a;
  border-left-color: #404040;
}

/* Mobile layout */
.right-bottom--mobile .right-bottom__tabs {
  grid-column: 1;
  grid-row: 1;
}

.right-bottom--mobile .right-bottom__chat {
  grid-column: 1;
  grid-row: 1;
}

.right-bottom--mobile .right-bottom__tabs--hidden,
.right-bottom--mobile .right-bottom__chat--hidden {
  display: none;
}

/* Mobile tab navigation */
.mobile-tab-nav {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-xs);
  gap: var(--spacing-xs);
}

.right-bottom--dark .mobile-tab-nav {
  background-color: #2a2a2a;
  border-top-color: #404040;
}

.mobile-tab-button {
  flex: 1;
  padding: var(--spacing-sm);
  border: none;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--border-radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  transition: all var(--transition-fast);
  position: relative;
}

.mobile-tab-button:hover {
  background-color: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.mobile-tab-button--active {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.tab-icon {
  font-size: var(--font-size-lg);
}

.tab-label {
  font-weight: var(--font-weight-medium);
}

.tab-badge {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  background-color: var(--color-error);
  color: white;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  padding: 2px 5px;
  border-radius: var(--border-radius-full);
  min-width: 16px;
  text-align: center;
  line-height: 1;
}

.mobile-tab-button--active .tab-badge {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-primary);
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .right-bottom--mobile {
    grid-template-rows: 1fr 60px;
  }
  
  .mobile-tab-nav {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .mobile-tab-button {
    padding: var(--spacing-xs);
    gap: 2px;
  }
  
  .tab-icon {
    font-size: var(--font-size-base);
  }
  
  .tab-label {
    font-size: 10px;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .right-bottom--tablet {
    grid-template-columns: 250px 1fr;
  }
  
  .right-bottom--tablet.right-bottom--client-info-visible {
    grid-template-columns: 250px 1fr 280px;
  }
}

/* Desktop adjustments */
@media (min-width: 1025px) {
  .right-bottom--desktop {
    grid-template-columns: var(--tabs-width) 1fr;
  }
  
  .right-bottom--desktop.right-bottom--client-info-visible {
    grid-template-columns: var(--tabs-width) 1fr var(--client-info-width);
  }
}

/* Animation for layout changes */
.right-bottom {
  transition: grid-template-columns var(--transition-normal);
}

.right-bottom__tabs,
.right-bottom__chat,
.right-bottom__client-info {
  transition: transform var(--transition-normal);
}

/* Focus management */
.right-bottom:focus-within {
  outline: none;
}

/* Print styles */
@media print {
  .right-bottom {
    grid-template-columns: 1fr !important;
  }
  
  .right-bottom__tabs,
  .right-bottom__client-info,
  .mobile-tab-nav {
    display: none !important;
  }
  
  .right-bottom__chat {
    grid-column: 1 !important;
  }
}
</style>